<template>
  <div class="box_yj" ref="parent">
    <span></span>
    <div class="section-header">出台热门政策TOP10</div>
    <div ref="charts" :style="chartsDom" v-show="jz">
		<div v-if="!data.length" style="position:absolute;top: 50%;left: 50%;margin-left: -48px;font-size: 14px;">暂无出台政策</div>
      <swiper :options="swiperOption" ref="mySwiper" v-if="data.length" :style="chartsDom">
        <!-- slides -->
        <swiper-slide v-for="(item, index) in data" :key="index">
          <rank-list-item :index="index" :color="`#fdbc21`" :name="item.name" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 0" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#fb7218`" :name="item.name" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 1" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#2bda6c`" :name="item.name" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 2" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#37a2da`" :name="item.name" :percentage="Math.round(100*(item.value/totalValue))" v-if="index > 2" class="rank-component"></rank-list-item>
        </swiper-slide>
      </swiper>
      
    </div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getPolicyHotArticles } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      data: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height-30-31 + 'px',
        'z-index': 100,
        position: 'relative',
        'overflow': 'hidden'
        // 'background-color': 'red'
      }
      }
    },
    totalValue() {
      if(this.data instanceof Array){
        return eval(this.data.map(v=>v.value).join('+'))
      }else{
        return 1
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      this.jz=false
      getPolicyHotArticles(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.data = data;
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .rank-component
    margin-top 15px
</style>